<!--
文档 目录查看界面
-->
<!DOCTYPE html>
<html>
<head>
    <title>ManaGement PlatForm</title>
    <!--    <#include  "/home.html">-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1" name="viewport"/>
    <meta name="_csrf" content="2a049f84-561c-44bf-ae25-f24fbf78b313">
    <meta name="_csrf_header" content="X-CSRF-TOKEN">
    <script src="/wedding_admin/js/common.js"></script>
    <script src="/wedding_admin/js/jquery.min.js"></script>
    <script src="/wedding_admin/js/kendo/kendo.all.min.js"></script>
    <script src="/wedding_admin/js/jszip.min.js"></script>
    <script src="/wedding_admin/js/um/respond.min.js"></script>
    <script src="/wedding_admin/js/um/es5-shim.min.js"></script>

    <script src="/wedding_admin/js/kendo/kendo.culture.zh-CN.js"></script>
    <script src="/wedding_admin/js/kendo/kendo.messages.zh-CN.js"></script>
    <script src="/wedding_admin/js/kendo/kendo.hap.js?v=20180330"></script>
    <script src="/wedding_admin/js/um/moment.min.js"></script>
    <script src="/wedding_admin/js/um/daterangepicker.js"></script>
    <script src="/wedding_admin/js/layui/lay/dest/layui.all.js"></script>

    <script src="/wedding_admin/js/vue_table/vue.min.js"></script>
    <script src="/wedding_admin/js/vue_table/vue-validator.min.js"></script>

    <script src="/wedding_admin/js/treegrid/tree.table.js"></script>
    <script src="/wedding_admin/js/treegrid/jquery.treegrid.extension.js"></script>
    <script src="/wedding_admin/js/treegrid/jquery.treegrid.min.js"></script>
    <script src="/wedding_admin/js/ztree/jquery.ztree.all.min.js"></script>

    <script src="/wedding_admin/js/bootstrap/bootstrap.min.js"></script>

    <link href="/wedding_admin/statics/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="/wedding_admin/statics/css/simple-line-icons.min.css" rel="stylesheet" type="text/css">
    <link href="/wedding_admin/css/ztree/css/metroStyle/metroStyle.css" rel="stylesheet" type="text/css"/>
    <link href="/wedding_admin/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <link href="/wedding_admin/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
    <link href="/wedding_admin/css/um/kendo.common-bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <link href="/wedding_admin/css/um/kendo.bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <link href="/wedding_admin/css/um/kendo.hap.css" rel="stylesheet" type="text/css"/>
    <link href="/wedding_admin/css/um/daterangepicker.css" rel="stylesheet">

    <link href="/wedding_admin/statics/css/toastr.min.css" rel="stylesheet" type="text/css">
</head>

<style>
    .nav > li > a:focus, .nav > li > a:hover {
        background-color: inherit !important;
    }

    .nav > li > a:focus, .nav > li > a:hover {
        background-color: inherit !important;
    }

    #mainTab .k-tabstrip-items li {
        position: relative;
        display: inline-block;
        cursor: pointer;
        height: auto !important;
        min-width: 70px;
        text-align: center;
    }

    #mainTab .k-tabstrip-items li span.k-link {
        background: 0 0 !important;
        border: 0;
        margin: 0;
        color: #678098;
        display: block;
        padding: 10px 20px;
    }

    #mainTab .k-tabstrip-items li:hover {
        background-color: #f2f6f9;
        border-top: 3px solid #f2f6f9 !important;
    }

    #mainTab .k-tabstrip-items li:hover span.k-link {
        color: #5b9bd1;
    }

    #mainTab .k-tabstrip-items li.k-state-active {
        background: 0 0;
        margin: 0;
        position: relative;
        background-color: #e9ecf3;
        cursor: default;
        border-top: 3px solid #5C9ACF !important;
        border-bottom-color: transparent;
        height: auto !important;
    }

    #mainTab .k-tabstrip-items li.k-state-active span.k-link {
        color: #5b9bd1;
        display: block;
        padding: 10px 20px;
    }

    #mainTab .k-tabstrip-items {
        width: 100%;
        /*  border-bottom: 1px solid #ddd;*/
        margin: 0px !important;
        background-color: #fff;
        list-style-type: none;
        position: relative;
        /* vertical-align: top;*/
        white-space: nowrap;
        padding: 0px;
        overflow: hidden;
    }


    #mainTab > .k-content {
        margin: 0;
        padding: 0;
        overflow: hidden;
    }

    #mainTab .k-tabstrip-items .k-state-default.k-state-hover .k-i-close {
        visibility: visible;
    }

    #mainTab .k-tabstrip-prev, #mainTab .k-tabstrip-next {
        top: 2px;
        background-color: #fff !important;
        display: inline-block !important;
    }

    #mainTab .k-i-arrow-w:hover, .k-i-arrow-e:hover {
        color: #36c6d3;
    }

    #mainTab .k-i-arrow-w {
        position: absolute;
        background-color: #fff;
        text-align: center;
    }

    #mainTab .k-i-arrow-e {
        position: absolute;
        background-color: #fff;
        text-align: center;
    }

    .k-tabstrip-wrapper .k-content iframe {
        height: 100%;
        width: 100%;
        padding: 0px;
    }


    .tabstrip-context-menu .k-item {
        height: 22px;
        line-height: 22px;
    }

    .tabstrip-context-menu .k-item:hover {
        background-color: #f2f6f9;
    }

    .tabstrip-context-menu .k-item .k-link {
        padding: 0px 42px 0px 25px;
    }


    #search-fld_listbox li {
        padding: 5px 10px;
        cursor: pointer;
    }

    #search-fld_listbox li.k-state-focused, #search-fld_listbox li.k-state-hover {
        background-color: #606683;
    }


    #search-fld-list .slimScrollDiv {
        margin-top: 9px;
    }

    #search-fld-list .slimScrollDiv .slimScrollBar {
        border-radius: 6px !important;
    }


    .e8TreeContent .e8TreeNew {
        border: 1px dotted #dadada;
        font-size: 18px;
        color: #018df5;
        width: 181px;
        height: 143px;
        margin-left: 10px;
        margin-top: 10px;
        cursor: pointer;
        position: relative;
        float: left;
        line-height: 143px;
        text-align: center;
        background-image: url(/wedding_admin/statics/img/1659940266426.jpg);
        background-position: 50% 50%;
        background-repeat: no-repeat;
    }
</style>

<body>


<div class="page-container" id="rrapp">
    <div class="col-12 cards-wrap">


        <div class="row center-xs card-items-wrap" style="">

            <!--2.6-->
            <div class="col-xl-12 col-lg-12 card-item">
                <div class="card-wrap">
                    <h4 class="title-label">
                        <span class="background"></span>

                    </h4>


                    <table class="table">
                        <thead>
                        <tr id="tr_ml">
                            <th style="font-size: 2ch"><input type="text" v-model="door.parentName"
                                                              lay-verify="title"
                                                              autocomplete="off"
                                                              class="layui-input">
                                <button type="button" class="btn btn-primary" id="search" @click="getMenu">搜索</button>
                            </th>
                            <th></th>
                            <th></th>
                            <th></th>
                        </tr>
                        </thead>
                    </table>
                    <!-- 选择菜单 -->
                    <div id="doorLayer01" style="padding:20px;" class="col-xl-3 col-lg-3  card-item">
                        <ul id="doorTree01" class="ztree"></ul>
                    </div>
                    <!--分割线-->
                    <div style="width:2px;height:550px;border-left:1px solid #ccc;float:left;margin-left:15px;"></div>

                    <div class="col-xl-8 col-lg-8  card-item">
                        <!--文档模块开始初-->
                        <div style="clear:both">
                            <div id="grid"></div>
                        </div>

                    </div>


                </div>
            </div>


        </div>
    </div>


</div>

<script>


    var setting01 = {

        data: {
            simpleData: {
                enable: true,
                idKey: "dbgyId",
                pIdKey: "maincategoryId",
                rootPId: -1
            },
            key: {
                url: "nourl",
                name: "categoryname"  //文件如果都是ztree都显示一个undefined  该字段需要对应数据库字段
            },
            doorList: {}
        },
        callback: {
            onClick: chooseNode,
        }
    };
    var ztree01;


    var vm = new Vue({
        el: '#rrapp',
        data: {
            showList: true,
            title: null,
            door: {
                parentName: null,
                parentId: 0,
                type: 1,
                orderNum: 0
            },
            menu: {
                parentName: null,
                maincategoryId: 0,
                type: 1,
                orderNum: 0
            }
        },
        mounted() {
            //初始化执行方法


            this.getMenu01();
        },
        methods: {
            /**
             * 模糊查找
             */
            getMenu: function () {

                $.ajax({
                    type: "POST",
                    url: "/wedding_admin/sys/sysdocumentdocsubcategory/selectLike",
                    contentType: "application/json",
                    data: (vm.door.parentName == '' || vm.door.parentName == undefined || vm.door.parentName == null) ? "FAIL" : vm.door.parentName,
                    success: function (r) {

                        ztree01 = $.fn.zTree.init($("#doorTree01"), setting01, r.docsubcategoryList);

                        var node = ztree01.getNodeByParam("dbgyId", vm.menu.maincategoryId);
                        ztree01.selectNode(node);
                        if (node.categoryname != "一级菜单") {
                            vm.door.parentName = node.categoryname;
                        }

                    }
                });

            },
            add: function () {

                //   window.open('sys_document_add.html');
                //   top.location.href="sys_document_add.html";
            },
            update: function () {


            },
            reload: function () {

                jQuery("#doorLayer").hide();//隐藏
            },
            getMenu01: function (menuId) {

                $.ajax({
                    type: "POST",
                    url: "/wedding_admin/sys/sysdocumentdocsubcategory/select",
                    contentType: "application/json",

                    success: function (r) {

                        ztree01 = $.fn.zTree.init($("#doorTree01"), setting01, r.docsubcategoryList);

                        var node = ztree01.getNodeByParam("dbgyId", vm.menu.maincategoryId);
                        ztree01.selectNode(node);

                        // vm.door.parentName = node.categoryname;
                    }
                });

            },


        }
    });

    //回车键触发方法
    document.onkeydown = keyEnter;

    function keyEnter() {
        if (window.event.keyCode == 13) {
            //执行方法
            $("#search").click();

        }
    }


    var Menu = {
        id: "menuTable",
        table: null,
        layerIndex: -1
    };


    var wdbh = "";
    var wdbt = "";
    var username = "";
    var cjrq = "";
    var jsrq = "";
    var state = "0";
    var mlid = "";//目录ID
    var crudServiceBaseUrl = "/wedding_admin/sys/sysdocument/infoBeLongTo",
        dataSource = new kendo.data.DataSource({
            transport: {
                read: {
                    url: crudServiceBaseUrl,
                    type: "POST",
                    dataType: "json"
                },
                parameterMap: function (options, type) {

                    if (type == "read" && options.page) {

                        var datas = Hap.prepareSubmitParameter(options, type);


                        return {//分页参数
                            limit: options.pageSize,  //当前页码
                            page: options.page, //每页显示记录数

                            wdbh: wdbh,//模糊查询参数
                            wdbt: wdbt,
                            username: username,
                            cjrq: cjrq,
                            jsrq: jsrq,
                            mlid: mlid,
                            state: state //是否启用模糊查询状态

                        }

                    } else if (type !== "read") {

                        return Hap.prepareQueryParameter(viewModel.model.toJSON(), options);

                    }
                }
            },
            batch: true,
            serverPaging: true,
            pageSize: 10,
            schema: {
                data: function (data) {
                    return data.page.list;
                },
                total: function (data) {
                    return data.page.totalCount;
                },
                model: {
                    id: "documentId",
                    fields: {
                        create_time: {type: "date", format: "{0:yyyy-MM-dd HH:mm:ss}"}
                    }
                }
            }


        });


    var grid = $("#grid").kendoGrid({

        dataSource: dataSource,
        dataBound: function () {

            if (parent.autoResizeIframe) {
                parent.autoResizeIframe('HSP_SERVICE_INSTANCE')
            }
        },
        resizable: true,
        scrollable: true,
        navigatable: false,
        editable: false,
        selectable: 'multiple,rowbox',
        pageable: {
            pageSizes: [10, 20, 50, 100, 200, 500],
            refresh: true,
            buttonCount: 5
        },
        columns: [
            {
                field: "documentId",
                title: '文档ID',
                width: 80,

                headerAttributes: {
                    "class": "table-header-cell",
                    style: "text-align: center"
                },
                attributes: {
                    style: "overflow: hidden; text-overflow: ellipsis; white-space: nowrap;text-align: center"
                }
            },
            {
                field: "doccode",
                title: '文档编号',
                width: 80,
                headerAttributes: {
                    "class": "table-header-cell",
                    style: "text-align: center"
                },
                attributes: {
                    style: "overflow: hidden; text-overflow: ellipsis; white-space: nowrap;text-align: center"
                }
            },
            {
                field: "headline",
                title: '文档标题',
                width: 80,
                headerAttributes: {
                    "class": "table-header-cell",
                    style: "text-align: center"
                },
                attributes: {
                    style: "overflow: hidden; text-overflow: ellipsis; white-space: nowrap;text-align: center"
                }
            },
            {
                field: "creatorName",
                title: '创建人',
                width: 80,
                headerAttributes: {
                    "class": "table-header-cell",
                    style: "text-align: center"
                },
                attributes: {
                    style: "overflow: hidden; text-overflow: ellipsis; white-space: nowrap;text-align: center"
                }
            },
            {
                field: "delFlag",
                title: '文档状态',
                width: 80,
                headerAttributes: {
                    "class": "table-header-cell",
                    style: "text-align: center"
                },
                attributes: {
                    style: "overflow: hidden; text-overflow: ellipsis; white-space: nowrap;text-align: center"
                },
                template: function (dataItem) {
                    /*0:草稿
                    1:正常
                    2:待发布
                    3:失效
                    4:作废*/
                    if (JSON.stringify(dataItem.delFlag) == 1) {
                        return "正常"
                    } else if (JSON.stringify(dataItem.delFlag) == 2) {
                        return "待发布"
                    }else if (JSON.stringify(dataItem.delFlag) == 4) {
                        return "作废"
                    }
                }
            }, {
                field: "createDate",
                title: '创建日期',
                width: 80,
                headerAttributes: {
                    "class": "table-header-cell",
                    style: "text-align: center"
                },
                attributes: {
                    style: "overflow: hidden; text-overflow: ellipsis; white-space: nowrap;text-align: center"
                }
            }, {
                attributes: {style: "text-align:center"},
                title: '文档详情',
                command: [{
                    name: 'edit',
                    template: '<a href="javascript:void(0)" class="k-grid-edit">详情</a>',
                    click: function (e) {
                        var data = this.dataItem($(e.target).closest("tr"));
                        window.open("../sys_documents_query.html?documentId=" + data.documentId);


                    }
                }],
                width: 70,
                headerAttributes: {
                    "class": "table-header-cell",
                    style: "text-align: center"
                }
            }
        ]
    }).data("kendoGrid");


    Hap.autoResizeGrid("#grid");




    function chooseNode(event, treeId, treeNode) {
        var zTreeOjb = $.fn.zTree.getZTreeObj("doorTree01");


        var s_wdbh = "";//获取  文档编号
        var s_wdbt = "";//获取 文档目录
        var s_username = "";//获取 文档创建者
        var s_cjrq = "";//获取 创建日期
        var s_jsrq = "";//获取 结束日期

        wdbh = s_wdbh;  //将文本传给 数据源(dataScorce)中的 demoCondiions
        wdbt = s_wdbt;
        username = s_username;
        cjrq = s_cjrq;
        jsrq=s_jsrq;
        mlid=JSON.stringify(zTreeOjb.getSelectedNodes()[0]["dbgyId"]);
        state="1"
        grid.dataSource.page(1);  //更新 Grid


    }
</script>

</body>
</html>
